<template>
<div class="shoppingCartContainer" v-loading="loading">
  <div class="shoppingCartContent" v-show="!loading">
    <div v-for="item in shoppingCartItemList" class="shoppingCartItem">
      <div style="float: left;display: flex">
        <img :src="item.commodity.img" width="60" style="margin-left: 10px"/>
        <span style="color: #939393;font-size: 13px;margin-top: 10px">{{item.commodity.name}}</span>
      </div>
      <div style="position: absolute;right: 30px;">
        <span style="color: #939393;font-size: 13px;margin-top: 10px">￥{{item.commodity.price}}</span>
        <span style="color: #939393;font-size: 13px;margin-top: 10px;display: block;padding-left: 20px;">x{{item.count}}</span>
      </div>
      <el-icon style="position: absolute;right: 8px;top: 4px;cursor:pointer;" @click="deleteShoppingCart(item.id)"><CircleClose /></el-icon>
    </div>
    <div class="bottom">
      <div class="text">
        共计
        <span style="color: red;">{{shoppingCartItemList.length}}</span>
        件商品,共计￥
        <span style="color: red;">{{allPrice}}</span>
      </div>
      <button class="btn" @click="gotoShoppingCart">马上抢</button>
    </div>
  </div>
</div>
</template>

<script lang="ts" setup>
import {computed, onMounted, ref} from "vue";
import {userStore} from "../../store/userStore";
import shoppingCart from "../../api/shoppingCart";
import {shoppingCartModel} from "../../model/shoppingCartModel";
import router from "../../router";
import {ElMessage} from "element-plus";

const userStoreImpl = userStore();

const loading = ref(true)

//购物车商品集合
const shoppingCartItemList = ref<shoppingCartModel[]>([])

//计算购物车的总价格
const allPrice = computed(() => {
  let ans = 0.0;
  shoppingCartItemList.value.forEach(c => {
    ans += (c.commodity.price * c.count)
  })
  return ans;
})

const deleteShoppingCart = (id) => {
  shoppingCart.delete(id)
      .then(res => {
        if (res && res.data.code == 200) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
        } else {
          ElMessage({
            type: 'success',
            message: '删除失败'
          })
        }
      }).finally(() => {
        initData();
  })
}

const gotoShoppingCart = () => {
  window.location.href = '/shoppingCart';
}

const initData = () => {
  if (userStoreImpl.isLogin() && userStoreImpl.user.id) {
    shoppingCart.getCommodityByUserId(userStoreImpl.user.id)
        .then(res => {
          const result = res.data;
          if (result && result.code == 200) {
            // console.log('result' , result)
            const shoppingCart = result.data.shoppingCart;
            // console.log('shoppingCart' , shoppingCart)
            if (shoppingCart) {
              // console.log(shoppingCart)
              shoppingCartItemList.value = shoppingCart;
            }
          }
        })
        .finally(() => {
          console.log(shoppingCartItemList.value);
          loading.value = false;
        })
  }
}

onMounted(() => {
  initData();
})

</script>

<style scoped>
.shoppingCartContainer{
  position: absolute;
  width: 350px;
  min-height: 200px;
  background-color: #ffffff;
  left: -300px;
  right: 0px;
  top: 40px;
  z-index: 999;
  box-shadow: #f5f5f5 -1px 0px 20px 7px;
  border: 1px solid #e3e3e3;
}
.shoppingCartItem{
  position: relative;
  display: flex;
  height: 60px;
  margin-top: 10px;
  width: 100%;
}
.bottom{
  display: flex;
  background: #e3e3e3;
  height: 60px;
  .text{
    width: 200px;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 13px
  }
  .btn{
    margin-left: 40px;
    color: white;
    background-color: #565656;
    width: 70px;
    height: 35px;
    border-radius: 10px;
    border: 1px solid #848484;
    margin-top: 10px;
    cursor: pointer;
  }
}
</style>
